<template>
  <div class="tree-list">
    <div class="search-box">
      <el-input
        placeholder="搜索单位类型"
        size="small"
        v-model="keywords"
        prefix-icon="el-icon-search"
        clearable></el-input>
    </div>
    <div class="add-box">
      <el-button type="primary" icon="el-icon-plus" size="small" @click.stop="addType('1')">添加单位类型</el-button>
    </div>
    <el-scrollbar class="tree-box">
      <el-tree
        class="filter-tree"
        :data="treeList"
        :props="defaultProps"
        :expand-on-click-node="false"
        default-expand-all
        ref="orgTree"
        @node-click="handleNodeClick"
        :filter-node-method="filterNode"
        node-key="code"
        highlight-current
        :draggable="draggable"
        :current-node-key="curNodeKey">
        <div class="custom-tree-node" slot-scope="{ data, node }">
          <div class="node-label">{{ node.label }}</div>
          <div v-if="data.code !== '-1'" class="icon-btn">
            <i class="el-icon-edit" title="编辑" @click.stop="editType(data)"></i>
            <i class="el-icon-delete" title="删除" @click.stop="delType(data)"></i>
          </div>
        </div>
      </el-tree>
    </el-scrollbar>
  </div>
</template>
<script>
import { cloneDeep } from 'lodash'
export default {
  name: 'TreeList',
  emits: ['add-type', 'edit-type', 'del-type', 'node-click'],
  props: {
    source: {
      type: Array,
      default: () => [],
    },
    draggable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      treeList: [],
      keywords: '',
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      curNodeKey: '-1',
    }
  },
  watch: {
    source: {
      handler(list) {
        if (list && list.length) {
          this.treeList = [{ code: '-1', name: '全部' }].concat(cloneDeep(list))
          this.$nextTick(() => {
            this.$refs.orgTree.setCurrentKey('-1')
          })
        } else {
          this.treeList = []
        }
      },
      immediate: true,
      deep: true,
    },
    keywords(val) {
      this.$refs.orgTree.filter(val)
    },
  },
  methods: {
    editType(obj) {
      this.$emit('edit-type', obj)
    },
    delType(obj) {
      this.$confirm('确定删除此单位类型?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$emit('del-type', obj)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除',
          })
        })
    },
    addType() {
      this.$emit('add-type')
    },

    handleNodeClick(data, node) {
      this.curNodeKey = data.code
      const { isLeaf = false } = node
      if (isLeaf) {
        this.$nextTick(() => {
          this.$refs.orgTree.setCurrentKey(data.code)
        })
        this.$emit('node-click', data)
      } else {
        this.$emit('node-click', data)
      }
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
  },
}
</script>
<style lang="scss" scoped>
.tree-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .search-box {
    margin-bottom: 20px;
    padding-right: 20px;
  }

  .tree-box {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .filter-tree {
    padding-right: 20px;
    // border-top: 1px solid #e4eaf0;
    flex: 1;

    ::v-deep .el-tree-node__content {
      height: auto;
      width: 100%;

      .el-tree-node__expand-icon {
        display: none;
      }

      .custom-tree-node {
        width: 100%;
        padding: 0 12px;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .node-label {
          padding: 12px 0;
          width: 100%;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        .icon-btn {
          display: none;

          i {
            padding: 5px;
            cursor: pointer;
            font-size: 18px;
            color: #666;
          }
        }

        &:hover {
          .node-label {
            width: 85%;
          }

          .icon-btn {
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }

  .add-box {
    text-align: center;
    margin-bottom: 20px;
    padding-right: 20px;

    .el-button {
      width: 100%;
    }
  }
}
</style>
